<template>
  <view class="table-code">
    <view class="table-code-image-wrap">
      <image :src="code" mode="aspectFill" class="table-code-image" />
    </view>
    <!-- <view class="save-btn">
      <button size="mini" @click="saveCode">保存</button>
    </view> -->
  </view>
</template>

<script>
// import uQRCode from "../../../js_sdk/Sansnn-uQRCode/uqrcode.js";
import { base64ToPath } from "image-tools";
export default {
  props: {
    code: {
      type: String,
      default() {
        return "";
      }
    },
    areaName: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data() {
    return {
      defaultCode: "/static/code.png",
      image: ""
    };
  },
  mounted() {
    if (!this.code) this.createCode();
  },
  methods: {
    createCode() {
      // uQRCode.make({
      //   canvasId: "qrcode",
      //   componentInstance: this,
      //   text: "http://192.168.31.98:8080/shop/2/table/3/home",
      //   size: 215,
      //   margin: 10,
      //   backgroundColor: "#ffffff",
      //   foregroundColor: "#000000",
      //   fileType: "jpg",
      //   correctLevel: uQRCode.defaults.correctLevel,
      //   success: res => {
      //     console.log(res);
      //     this.image = res;
      //   }
      // });
    },
    saveCode(w) {
      base64ToPath(this.code).then(path => {
        uni.saveImageToPhotosAlbum({
          //将图片保存在手机
          filePath: path, //保存的位置
          success: res => {
            uni.showToast({
              title: `二维码${this.areaName}保存成功`,
              icon: "none"
            });
          },
          fail: error => {
            console.log("fail", error);
          }
        });
      });
    }
  }
};
</script>

<style scoped lang="scss">
.table-code {
  position: relative;
  display: flex;
  flex-direction: column;
  // justify-content: center;
  align-items: center;
  padding: 20rpx 0;

  .canvas {
    visibility: hidden;
    height: 0;
    margin-top: -215px;
  }
  .table-code-image-wrap {
    height: 300rpx;
    width: 300rpx;
    background-color: #ffffff;
    .table-code-image {
      height: 100%;
      width: 100%;
    }
  }

  .save-btn {
    margin-top: 10rpx;
  }
}
</style>
